<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        input, button { margin: 5px; padding: 5px; }
        #output { margin-top: 20px; white-space: pre-wrap; }
    </style>
</head>
<body>
    <h2>学生信息管理（CRUD）</h2>

    <h3>新增/更新学生</h3>
    <input type="text" id="stu_id" placeholder="学生ID（更新用，可选）">
    <input type="text" id="name" placeholder="姓名">
    <input type="number" id="age" placeholder="年龄">
    <input type="text" id="gender" placeholder="性别">
    <button onclick="createStudent()">新增</button>
    <button onclick="updateStudent()">更新</button>

    <h3>删除学生</h3>
    <input type="text" id="delete_id" placeholder="学生ID">
    <button onclick="deleteStudent()">删除</button>

    <h3>获取全部学生</h3>
    <button onclick="getStudents()">获取所有学生</button>

    <div id="output"></div>

    <script>
        const apiUrl = "http://127.0.0.1:8080/student1demo2/"; // 替换为你的实际路由地址

        function getStudents() {
            fetch(apiUrl)
                .then(res => res.json())
                .then(data => showOutput(data))
                .catch(err => showOutput("查询失败：" + err));
        }

        function createStudent() {
            const data = {
                name: document.getElementById("name").value,
                age: parseInt(document.getElementById("age").value),
                gender: document.getElementById("gender").value
            };
            fetch(apiUrl, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(data)
            })
            .then(res => res.json())
            .then(data => showOutput(data))
            .catch(err => showOutput("新增失败：" + err));
        }

        function updateStudent() {
            const data = {
                id: parseInt(document.getElementById("stu_id").value),
                name: document.getElementById("name").value,
                age: parseInt(document.getElementById("age").value),
                gender: document.getElementById("gender").value
            };
            fetch(apiUrl, {
                method: "PUT",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(data)
            })
            .then(res => res.json())
            .then(data => showOutput(data))
            .catch(err => showOutput("更新失败：" + err));
        }

        function deleteStudent() {
            const id = parseInt(document.getElementById("delete_id").value);
            fetch(apiUrl, {
                method: "DELETE",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ id: id })
            })
            .then(res => res.json())
            .then(data => showOutput(data))
            .catch(err => showOutput("删除失败：" + err));
        }

        function showOutput(data) {
            document.getElementById("output").innerText = JSON.stringify(data, null, 2);
        }
    </script>
</body>
</html>
